<template>
  <div>
    <div class="welcomeTitle">
      <span>
        欢迎登录！
      </span>
    </div>

    <div align="center">
      <div class="userInput" v-loading="loginLoading">
        <el-form :model="user" label-width="80px" ref="loginInfo" :rules="rules">
          <el-form-item label="账号:" prop="account" >
            <el-input placeholder="请输入账号" v-model="user.account" prefix-icon="el-icon-user-solid" clearable></el-input>
          </el-form-item>

          <el-form-item label="密码:" prop="password">
            <el-input placeholder="请输入密码" show-password v-model="user.password" prefix-icon="el-icon-key" clearable></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="verifyCode">
            <div class="inputVerifyCode" >
              <el-input placeholder="请输入验证码" v-model="user.verifyCode" prefix-icon="el-icon-edit" clearable></el-input>
            </div>
            <img :src="verifyCodeUrl" @click="changeVerifyCode" alt="点击刷新">

          </el-form-item>

        </el-form>

        <div>
          <el-button type="success" @click="login">登录</el-button>
          <el-button type="primary" @click="register">注册</el-button>
          <el-button type="info">找回密码</el-button>
        </div>
      </div>
    </div>


  </div>
</template>

<script>

import loginApi from "@/service/loginApi";
import cookieStore from "@/cookieStore/index";

export default {
  name: "login",
  data() {
    return {
      loginLoading:false,
      verifyCodeUrl: "/chen/api/getVerificationCode?t="+Math.random(),
      user: {
        account:"",
        password: "",
        verifyCode: ""
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],

        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],

        verifyCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ]

      }
    }
  },

  methods: {
    changeVerifyCode(){
      this.verifyCodeUrl = "/chen/api/getVerificationCode?t="+Math.random();
    },

    login(){

      let check = true;
      this.loginLoading = true;
      this.$refs.loginInfo.validate((valid) => {
        if(!valid){
          check = false;
          return false;
        }
      });

      if(!check){
        console.error("验证不通过！");
        this.loginLoading = false;
        return;
      }

      let that = this;
      loginApi.login(this.user).then(res => {
        that.changeVerifyCode();
        if(res.data.code == 200){
          let data = res.data.data;
          cookieStore.setToken(data.account);
          cookieStore.setRole(data.role);
          this.$router.push("/manage");
          console.log("2222");
        }else{
          that.loginLoading = false;
          that.user.verifyCode = "";
          that.$message({message: res.data.message, type: "error"});
        }
      }).catch(() => {
        that.changeVerifyCode();
        that.loginLoading = false;
        console.error("请求失败！！！");
      })
    },

    register(){
      this.$router.push("/register");
    }
  },

  activated() {
    this.verifyCodeUrl = "/chen/api/getVerificationCode?t="+Math.random();
  }
}
</script>

<style scoped>
  .welcomeTitle {
    font-size: 50px;
  }

  .userInput {
    padding: 15px;
    margin-top: 50px;
    width: 350px;
    border: green solid 2px;
    border-radius: 15px;
  }

  .inputVerifyCode {
    display: inline-block;
    width: 150px;
    height: 28px;
  }
</style>